<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
	<div class="content">
		<div class='infos'>
			<img class="infos-img" :src="info.doctor_sex=='男'?require('@/assets/img/man.jpg'):require('@/assets/img/women.jpg')"  alt="">
		    <div class="infos-info">
				<div>
					<div class="infos-info-t">{{info.doctor_name||""}}</div>
					<div class="tg">{{info.staff_protec_post||'医生'}}</div>
				</div>
				<div>{{info.dept_name||''}}</div>
			</div>
		</div>
		<div class="timeInfo">
			<div class="timeInfo-title">
				<div class="titleLine">出诊时间</div>
			</div>
			<div class="timeInfo-time" v-if='rgst_arrange.length>0'>
				<div @click="timeIndex=i" class="timeInfo-time-i" :class="timeIndex==i?'active':''" v-for="(v,i) in rgst_arrange" :key='i'>
					<div>
						<div>{{getTimeStatus(v.date)[0]}}</div>
						{{getTimeStatus(v.date)[1]}}
					</div>
				</div>
				
			</div>
			<div v-else style="padding-top: 20px;font-size:14px;color:#909090;padding-left: 4px;">
				暂无出诊时间
			</div>
			<div class="timeInfo-item flex3" v-if='rgst_arrange.length>0'>
				<div class="timeInfo-item-name">{{rgst_arrange[timeIndex].time_slot}}</div>
				<div class="timeInfo-item-info">
					<div class="flex1">
						山西天慈医院-{{info.dept_name}}-{{info.doctor_name}} <div class="timeInfo-item-info-price">￥{{rgst_arrange[timeIndex].price}}</div>
					</div>
					<div class="timeInfo-item-info-tips flex1">
						<div>
							<div class="tg">{{info.staff_protec_post||'医生'}}</div>
							<div class="tg tg_g">到院就诊</div>
						</div>
						<div @click="rgst_arrange[timeIndex].remainder>0?toDoctorYuyue('/chooseTime',info,rgst_arrange[timeIndex].date):''" class="timeInfo-item-info-tips-btn" :class="rgst_arrange[timeIndex].remainder>0?'':'noBtn'">
							{{rgst_arrange[timeIndex].remainder>0?'预约':'约满'}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="timeInfo">
			<div class="timeInfo-title">
				<div class="titleLine">医生介绍（擅长专业)</div>
			</div>
			<div class="timeInfo-intro">
				<div class="timeInfo-intro-i flex3">
					<div class="timeInfo-intro-i-name flex3">
						<div>
							<img class="oneImg" src="@/assets/img/index/intro.png" alt="">
							<div>简介</div>
						</div>
					</div>
					<div class="timeInfo-intro-i-info">{{info.staff_persprf||'暂无'}}</div>
				</div>
				<!-- <div class="timeInfo-intro-i flex3">
					<div class="timeInfo-intro-i-name flex3">
						<div>
							<img class="oneImg" src="@/assets/img/index/zuanshi.png" alt="">
							<div>擅长</div>
						</div>
					</div>
					<div class="timeInfo-intro-i-info">
						医学硕士，擅长中西医结合治疗儿童呼吸、消化、神经系统疾病，在儿童保健有独到专长。
						医学硕士，擅长中西医结合治疗儿童呼吸、消化、神经系统疾病，在儿童保健有独到专长。
					</div>
				</div> -->
			</div>
		</div>
		<back-img></back-img>
	</div>
	</van-pull-refresh>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				timeList:[],
				timeIndex:0,
				yuyueList:[
					{name:'上午',isCan:false},
					{name:'下午',isCan:true}
				],
				info:{},
				rgst_arrange:[],
				dept_id:'',
				doctor_id:'',
				
			};
		},
		created() {
			// this.gettime()
			if (this.$route.query.doctor_id) {
				this.dept_id = this.$route.query.dept_id||''
				this.doctor_id=this.$route.query.doctor_id
				this.getInfo()
			}
		},
		components: {

		},
		methods: {
			onRefresh() {
				this.timeIndex=0
				this.getInfo()
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			toDoctorYuyue(url,v,time) {
				this.$router.push({
					path: url,
					query: {
						dept_id:this.dept_id,
						doctor_id:v.doctor_id,
						time:time
					},
				})
			},
			getInfo(){
				let url = "/api/his/registerArrange4Doctor";
				this.$axios.post(url,{
					dept_id:this.dept_id,
					doctor_id:this.doctor_id||""
				}).then(res => {
					this.info=res.doctors[0]
					this.rgst_arrange=this.info.rgst_arrange
				})
				.catch(err => {});
			},
			//根据日期获取
			getTimeStatus(time){
				var a = new Array("日", "一", "二", "三", "四", "五", "六");  
				var week = new Date(time).getDay();  
				var str = "周"+ a[week];  
				var arr=time.split('-')
				var times= arr[1]+'-'+arr[2]
				return [times,str]
			},
			gettime() {
				var now = new Date();
				var nowTime = now.getTime();
				var oneDayTime = 24 * 60 * 60 * 1000;
				var timeArr=[]
				for (var i = 0; i < 7; i++) {
					var ShowTime = nowTime + i * oneDayTime;
					var myDate = new Date(ShowTime);
					var year = myDate.getFullYear();
					var month = myDate.getMonth() + 1;
					var date = myDate.getDate();
					var str = "周" + "日一二三四五六".charAt(myDate.getDay());
					timeArr.push({
						time:month + "-" + date,
						str:str,
						date:year + "-" + month + "-" + date
					})
				}
				this.timeList=timeArr
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		padding-top: 10px;
		min-height: 100vh;
		background-color:#f0f8f8;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
		.timeInfo{
			width: 340px;
			min-height: 180px;
			background: #FFFFFF;
			border-radius: 10px;
			padding: 0 8px;
			margin:0 auto 10px auto;
			&-intro{
				padding: 10px 7px;
				&-i{
					align-items: stretch;
					margin-bottom: 10px;
					&-info{
						padding: 15px 7px;
						width: 261px;
						background: #EEEEEE;
						border-radius: 0px 5px 5px 0px;
						font-size: 11px;
						font-family: PingFang;
						font-weight: 500;
						color: #666666;
						line-height: 18px;
					}
					&-name{
						width: 50px;
						background: rgba(25,119,253,0.1);
						border-radius: 5px 0px 0px 5px;
						font-size: 13px;
						font-family: PingFang;
						font-weight: 500;
						color: #1977FD;
						text-align: center;
						margin-right: 1px;
						.oneImg{
							width: 18px;
							display: block;
							margin:0 auto 6px auto;
						}
						.twoImg{
							width: 18px;
							display: block;
							margin:0 auto 6px auto;
						}
					}
				}
			}
			&-title{
				padding: 15px 7px;
				border-bottom: 1px solid #EEEEEE;
			}
			&-item{
				border-bottom: 1px solid #EEEEEE;
				&-info{
					width: calc(100% -  48px);
					font-size: 12px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					&-tips{
						margin-top: 7px;
						&-btn{
							width: 40px;
							height:20px;
							background: #4A8CFF;
							border-radius:11px;
							font-size: 11px;
							font-family: PingFang;
							font-weight: 500;
							color: #FFFFFF;
							text-align: center;
							line-height: 20px;
						}
						.noBtn{
							background: rgba(166,166,166,0.5) !important;
							color: #fff;
						}
					}
					&-price{
						font-size: 12px;
						font-family: PingFang;
						font-weight: 500;
						color: #eb2d3c;
						margin-right: 9px;
					}
				}
				&-name{
					display: inline-block;
					margin: 0 13px 0 7px;
					width: 28px;
					text-align: center;
					height: 50px;
					background:rgba(25, 119, 253, 0.1);
					font-size: 12px;
					font-family: PingFang;
					font-weight: 500;
					color: #1977FD;
					line-height: 50px;
				}
			}
			&-time{
				padding:3px 7px;
				border-bottom: 1px solid #EEEEEE;
				display:flex;
				align-items: center;
				&-i{
					display:flex;
					align-items: center;
					justify-content: center;
					width: 44px;
					height: 44px;
					background: #fff;
					font-size: 11px;
					font-family: PingFang;
					font-weight: 500;
					color: #666666;
				}
				.active{
					width: 44px;
					height: 44px;
					background:rgba(25, 119, 253, 0.1);
				}
			}
		}
		.tg{
			padding: 0 4px;
			min-width:52px;
			display: inline-block;
			height: 20px;
			background: linear-gradient(-90deg, #17BBB6 0%, #62DE9B 100%);
			border-radius: 5px;
			font-size: 11px;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 20px;
			margin-right: 7px;
		}
		.tg_g{
			background:#EEEEEE;
			color: #999;
		}
		.infos{
			margin: 0 auto 10px auto;
			padding: 8px 15px;
			width: 340px;
			background: #FFFFFF;
			border-radius: 10px;
			display: flex;
			align-items: center;
			font-size: 13px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			&-info{
				display: inline-flex;
				flex-direction: column;
				justify-content: space-between;
				height: 75px;
				&-t{
					font-size: 15px;
					font-family: PingFang;
					font-weight: bold;
					color: #333333;
					margin-bottom: 7px;
				}
			}
			&-img{
				height: 75px;
				margin-right: 15px;
			}
		}
	}
</style>